<template>
    <div class="Florist" v-loading="loading">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">花艺师详情</p>
        </Top>
        <div class="main">
            <!--相册-->
            <div class="banner">
                <img class="headImg-backgroundx imgFull" :src="allInfos.teacher_img" alt="" />
                <ul class="photoList" @click="albumShow=true" v-if="splicePhoto.length">
                    <li v-for="(item,index) in splicePhoto" :key="index"><img class="-background" :src="item.url" alt=""></li>
                </ul>
            </div>
            <!--花艺师信息-->
            <div class="teacherInfo">
                <h3>{{allInfos.teacher_name}}</h3>
                <p class="about">{{allInfos.teacher_level}}&emsp;关注：{{allInfos.follow_num}}&emsp;花粉：{{allInfos.plink_num}} </p>
                <div class="intro">
                    {{allInfos.teacher_desc}}
                </div>
                <!--添加关注-->
                <p class="gz" :class="{on:followState===2}" @click="follow" v-loading="loadingGZ" element-loading-spinner="el-icon-loading">{{followState===1?'+关注':'已关注'}}</p>
            </div>
            <!--上传课程列表-->
            <div class="upload" v-if="allInfos.lession && allInfos.lession.length>0">
                <h3>上传课程<b>已上传{{allInfos.lession_num}}课程</b>
                    <router-link tag="span" :to="{path:'/titList',query:{url:'?method=flower.teacher.teacherlessionlist',title:'全部课程',teacher_id:allInfos.teacher_id}}" >全部课程 ></router-link>
                </h3>
                <ul class="clearfix uploadList">
                    <router-link tag="li" :to="{path:'detail',query:{lession_id:item.lession_id,member_id:getMemberId()}}" v-for="(item,index) in allInfos.lession" :key="index">
                        <img class="imgFullx" :src="item.lession_img" alt="">
                        <p class="lessonName">{{item.lession_name}}</p>
                    </router-link>
                </ul>
            </div>
            <!--作品集锦-->
            <div class="opus" v-if="allInfos.goodslist && allInfos.goodslist.length>0">
                <h3>作品集锦({{allInfos.goods_num}})<router-link tag="span" :to="{path:'/Opus',query:{teacher_id: allInfos.teacher_id}}">更多 ></router-link></h3>
                <ul class="opusList">
                    <!-- <li :class="{big_left:index==0,small_top:index==1,small_bottom:index==2,}" v-for="(item,index) in spliceGoods" :key="index">
                        <img class="imgFull" :src="item.url" alt="">
                    </li> -->
                    <li class='big_left'>
                        <div class='background-imgFull' :style='{backgroundImage: `url(${spliceGoods[0] ? spliceGoods[0].url : ""})`}'></div>
                    </li>
                    <li class='small_top'>
                        <div class='background-imgFull' :style='{backgroundImage: `url(${spliceGoods[1] ? spliceGoods[1].url : ""})`}'></div>
                    </li>
                    <li class='small_bottom'>
                        <div class='background-imgFull' :style='{backgroundImage: `url(${spliceGoods[2] ? spliceGoods[2].url : ""})`}'></div>
                    </li>
                </ul>
            </div>
            <!--花艺感悟-->
            <div class="other">
                <h3>花艺感悟</h3>
                <div class="contents">
                    {{allInfos.teacher_feeling}}
                </div>
            </div>
        </div>
        <!--相册-->
        <transition name="bounce-up">
            <Album @Call="closeAlbum" v-if="albumShow" :data="{list:allInfos.photo}"></Album>
        </transition>

    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import Album from '@/components/floristVues/Album'
    export default {
        name: 'Florist',
        components: {
            Top,//顶部信息组件
            Album,//相册
        },
        data () {
            return {
                loading:false,//加载动画
                loadingGZ:false,//关注请求动画
                followState:-1,//0:未关注 1：已关注

                albumShow:false,//相册显示状态
                allInfos:{},//页面初始化所需所有信息
                splicePhoto:[],//限制3张头像列表
                spliceGoods:[],//限制3作品列表
            }
        },
        created(){
            /*初始化*/
            this.loading = true;
            this.Posthttp('/?method=flower.teacher.info',{member_id:this.getMemberId(),teacher_id:this.$route.query.teacher_id},(res)=>{
                this.loading = false;

                if(JSON.parse(res.bodyText).status ===1){
                    this.allInfos = JSON.parse(res.bodyText).data.teacher;
                    this.followState = JSON.parse(res.bodyText).data.teacher.is_follow;
                    this.splicePhoto = JSON.parse(res.bodyText).data.teacher.photo.splice(0,3);
                    this.spliceGoods = JSON.parse(res.bodyText).data.teacher.goodslist.splice(0,3);
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });  
        },
        methods:{
            //关闭相册组件
            closeAlbum(msg){
                this.albumShow = msg;
            },
            //添加关注
            follow(){
                if(this.getMemberId() === 0){//判断登陆
                    this.$router.push('/login')
                    return;
                }
                this.loadingGZ = true;
                this.Posthttp('/?method=flower.user.addFollow',{teacher_id:this.allInfos.teacher_id,member_id:this.getMemberId(),follow_type:this.followState},(res)=>{
                    this.loadingGZ = false;
                    if(JSON.parse(res.bodyText).status === 1){//成功
                        this.followState = this.followState === 1?2:1;
                    }else{//失败
                        this.$message.warning('关注失败~~请重试！');
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Florist {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        .main{
            bottom: 0;
            background-color: #f2f2f2;
            overflow-x: hidden;
            /*顶部banner*/
            .banner{
                width: 100%;
                position: relative;
                /*相册*/
                .photoList{
                    height: 1.92rem;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: -.5rem;
                    border: .06rem solid rgba(51, 51, 51,.1);
                    z-index: 10;
                    display: flex;
                    background-color: rgba(51, 51, 51,.3); 
                    li{
                        width: 1.8rem;
                        height: 1.8rem;
                        margin-right: .06rem;
                        &:last-child{
                            margin-right: 0;
                        }
                    }
                }
            }
            /*花艺师信息*/
            .teacherInfo{
                padding: 1.1rem .2rem .2rem;
                background-color: #fff;
                position: relative;
                color: #777;
                h3{
                    font-size: .3rem;
                    color: #333;
                    font-weight: 600;
                }
                .about{
                    margin: .38rem 0 .24rem;
                }
                .intro{
                    line-height: .42rem;
                    text-align: justify;
                }
                .gz{
                    position: absolute;
                    width: 1.3rem;
                    height: .6rem;
                    line-height: .6rem;
                    text-align: center;
                    border: 1px solid #777777;
                    border-radius: .06rem;
                    top: .9rem;
                    right: .2rem;
                    &.on{
                        border: 1px solid #e7470e;
                        color: #e7470e;
                    }
                }
            }
            /*上传课程列表*/
            .upload{
                width: 100%;
                margin-top: .2rem;
                padding: .4rem .2rem;
                background-color: #fff;
                /*h3*/
                h3{
                    position: relative;
                    font-size: .26rem;
                    color: #333;
                    padding-bottom: .4rem;
                    b{
                        color: #e7470e;
                        font-size: .22rem;
                        margin-left: .1rem;
                    }
                    span{
                        position: absolute;
                        right: 0;
                        top: 0;
                        color: #777;
                    }
                }
                /*列表*/
                ul.uploadList{
                    display: -webkit-box;
                    overflow-x: scroll;
                    -webkit-overflow-scrolling:touch;
                    li{
                        width: 2.6rem;
                        margin-right: .2rem;
                        .lessonName{
                            text-align: center;
                            width: 100%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: #333;
                            margin-top: calc(.2rem - 2px);
                            padding-top: 2px;
                        }
                    }
                }
            }
            /*作品集锦*/
            .opus{
                @extend .upload;
                .opusList{
                    position: relative;
                    li{
                        background: #eee;
                    }
                    .big_left{
                        width: 3.85rem;
                        height: 4.3rem;
                        border-right: 1px solid #f2f2f2;
                    }
                    .small_top{
                        width: 2.15rem;
                        height: 2.15rem;
                        position: absolute;
                        right: 0;
                        top: 0;
                        border-bottom: 1px solid #f2f2f2;
                    }
                    .small_bottom{
                        @extend .small_top;
                        top:auto;
                        bottom: 0;
                        border-bottom: 0;
                    }
                }
                .background-imgFull{
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: 50%;
                    background-repeat: no-repeat;
                }
            }
            /*花艺感悟*/
            .other{
                @extend .upload;
                h3{
                    padding-bottom: .2rem;
                }
                color: #777;
                line-height: .42rem;
            }
        }
    }
</style>
